<template>
  <el-select
    v-model="selectedValue"
    :placeholder="placeholder"
    filterable
    clearable
    @change="handleChange"
  >
    <el-option
      v-for="item in taskList"
      :key="item.id"
      :label="item.taskName"
      :value="item.taskName"
    />
  </el-select>
</template>

<script setup lang="ts">
import { MainTasksApi } from '@/api/oa/maintasks'

defineOptions({ name: 'TaskTitleSelect' })

const props = defineProps({
  modelValue: {
    type: String,
    default: undefined
  },
  placeholder: {
    type: String,
    default: '请选择任务主题'
  }
})

const emit = defineEmits(['update:modelValue', 'change'])

const taskList = ref<any[]>([])
const selectedValue = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

// 获取主任务列表
const getTaskList = async () => {
  try {
    const res = await MainTasksApi.getMainTasksPageAll({ pageNo: 1, pageSize: 100 })
    taskList.value = res.list
  } catch (error) {
    console.error('获取主任务列表失败:', error)
  }
}

// 处理选择变更
const handleChange = (value: string) => {
  const selectedTask = taskList.value.find(item => item.taskName === value)
  emit('change', selectedTask ? { id: selectedTask.id, taskName: selectedTask.taskName } : undefined)
}
// ... existing code ...

// 初始化
onMounted(() => {
  getTaskList()
})
</script> 